<template>
    <div style="height: 100%">
        <ul id="navlist">
            <li id="home"><a href="#"></a></li>
            <li id="prev"><a href="#"></a></li>
            <li id="next"><a href="#"></a></li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "index.vue"
    }
</script>

<style>

    #navlist {
        height: 100%;
    }

    #navlist a {
        height: 44px;
        display: block;
    }

    #navlist li {
        margin: 0;
        padding: 0;
        list-style: none;
        float: left;
    }

    #home {
        background: url("https://www.runoob.com/images/img_navsprites_hover.gif") 0 0;
        left: 0px;
        width: 46px;
    }
    #home:hover {
        background: url("https://www.runoob.com/images/img_navsprites_hover.gif") 0 -45px;
        left: 0px;
        width: 46px;
    }

    #prev {
        background: url("https://www.runoob.com/images/img_navsprites_hover.gif") -47px 0;
        left: 0px;
        width: 43px;
    }
    #prev:hover {
        background: url("https://www.runoob.com/images/img_navsprites_hover.gif") -47px -45px;
        left: 0px;
        width: 43px;
    }

    #next {
        background: url("https://www.runoob.com/images/img_navsprites_hover.gif") -91px 0;
        left: 0px;
        width: 43px;
    }
    #next:hover {
        background: url("https://www.runoob.com/images/img_navsprites_hover.gif") -91px -45px;
        left: 0px;
        width: 43px;
    }

</style>